<template>
  <ul class="van-hairline--top tabbar">
    <li :class="curPath === item.path ? 'active' : ''" v-for="(item, index) in tabList" :key="index" @click="tabClick(item.path)">
      <img :src="curPath === item.path ? item.iconSelected : item.icon" alt="" />
      <p>{{ item.text }}</p>
    </li>
  </ul>
</template>

<script>
import { mapGetters } from 'vuex';
import { Dialog } from 'vant';
export default {
  data() {
    return {
      showDialog: false,
      taskTypeList: []
    };
  },
  computed: {
    ...mapGetters({
      tabList: 'tabList'
    }),
    curPath() {
      return this.$route.path;
    }
  },
  methods: {
    tabClick(path) {
      if (this.curPath == path) return;
      if (path === '/mine' && !localStorage.getItem('token')) {
        Dialog.confirm({
          title: '您还未实名，是否立即进行实名',
          confirmButtonColor: '#f09637',
          confirmButtonText: '立即实名',
          cancelButtonText: '暂不实名'
        }).then(() => {
          this.$router.openPage('/login');
        });
      } else {
        this.$router.openPage(path);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  z-index: 9;
  display: flex;
  justify-content: space-around;
  background: #fff;
  li {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    line-height: 50px;
    color: #b3b3b3;
    img {
      width: 44px;
      margin-top: 15px;
    }
    &.active {
      color: #fe9100;
    }
  }
}
</style>
